<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>名单系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入 Bootstrap 3.3.7 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container" id="app">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3 class="text-center text-info">
                名单查询系统
            </h3>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <form class="form-horizontal" role="form" onsubmit="return false">
                        <div class="form-group">
                            <label for="language" class="col-sm-2 control-label">语言</label>
                            <div class="col-sm-10">
                                <select type="email" class="form-control" id="language" v-model="language">
                                    <option value="eng">英文</option>
                                    <option value="cmn">中文</option>
                                    <option value="rus">俄文</option>
                                    <option value="uig">维吾尔语</option>
                                    <option value="kaz">哈萨克语</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="xuhao" class="col-sm-2 control-label">输入序号</label>
                            <label for="xuhao" class="col-sm-2 control-label" @click = "xuhao--"> < </label>
                            <div class="col-sm-4">
                                <input type="number" class="form-control" id="xuhao" v-model = "xuhao" v-on:change="nav"/>
                            </div>
                            <label for="xuhao" class="col-sm-1 control-label" @click = "xuhao++" > > </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="result">
        <div class="row clearfix">
            <div class="col-md-4 column">
                <img alt="140x140" :src="result.userphoto" class="img-rounded" />
            </div>
            <div class="col-md-4 column">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="cmnnamelabel">姓名</label>
                        <label class="col-sm-pull-9 control-label" id="cmnname">{{result.usercmnname}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="latnamelabel">姓氏</label>
                        <label class="col-sm-pull-9 control-label" id="latname">{{result.userlatname}}</label>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="agelabel">年龄</label>
                        <label class="col-sm-pull-9 control-label">{{result.userage}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="genderlabel">性别</label>
                        <label class="col-sm-pull-9 control-label">{{result.usergender}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="originlabel">出生地</label>
                        <label class="col-sm-pull-9 control-label" id="origin">{{result.userorigin}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="locationlabel">地址</label>
                        <label class="col-sm-pull-9 control-label" id="location">{{result.userlocation}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="reasonlabel">原因</label>
                        <label class="col-sm-pull-9 control-label" id="reason">{{result.userreason}}</label>
                    </div>
                </form>
            </div>
            <div class="col-md-4 column">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="ethniclabel">民族</label>
                        <label class="col-sm-pull-9 control-label" id="ethnic">{{result.userethnic}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="joblabel">职业</label>
                        <label class="col-sm-pull-9 control-label" id="job">{{result.userjob}}</label>
                    </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label" id="detentiontypelabel">拘留类型</label>
                        <label class="col-sm-pull-9 control-label" id="detentiontype">{{result.userdetentiontype}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="detentiontimelabel">拘留时间</label>
                        <label class="col-sm-pull-9 control-label" id="detentiontime">{{result.userdetentiontime}}</label>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="healthlabel">健康状况</label>
                        <label class="col-sm-pull-9 control-label" id="health">{{result.userhealth}}</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="idnolabel">证据号码</label>
                        <label class="col-sm-pull-9 control-label" id="idno">{{result.useridno}}</label>
                    </div>
                </form>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">提供证词人（*直接递交的）</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments1"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">有关受害者</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments2"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">受害者所处地</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments3"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">受害者被拘禁日期</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments4"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">被通知拘禁原因</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments5"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">受害者目前情况</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments6"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">提供证词人士是如何得知受害者的情况？</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments7"></span>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <label class="col-sm-12 control-label">其他资料</label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <span class="col-sm-12 control-label" v-html="result.comments8"></span>
            </div>
        </div>


        <div class="row clearfix">
            <div class="col-md-12 column">
                <!--<h5>-->
                    <!--图片列表：-->
                <!--</h5>-->
                <label class="col-sm-12 control-label">图片列表：</label>
            </div>
        </div>

        <div class="row clearfix" v-for="(row,i) in listUserImages">
            <div class="col-md-4 column" v-for="(cell,j) in row">

                <embed v-if="cell!=null && cell.toLowerCase().indexOf('pdf')!=-1" style="width: auto;height: auto;max-width: 100%;max-height: 310px" :src="cell">
                </embed>

                <img v-else style="width: auto;height: auto;max-width: 100%;max-height: 300px" :src="cell">
                </img>

            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <!--<h5>-->
                    <!--视频列表：-->
                <!--</h5>-->
                <label class="col-sm-12 control-label">视频列表：</label>
            </div>
        </div>

        <div class="row clearfix" v-for="(row,i) in listUserVideos">
            <div class="col-md-4 column" v-for="(cell,j) in row">
                <video controls width="310" height="210" :src="cell" />
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="js/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script type = "text/javascript">
    // var result=new Vue({
    //     el: '#result',
    //     data() {
    //         return {
    //                 userphoto:'11111',
    //                 userage:'1',
    //                 usergender:'111111111111111',
    //                 userethnic:'22222222222',
    //                 userjob:'33333333333333333',
    //                 userorigin:'4444444444444',
    //                 userlocation:'55555',
    //                 userdetentiontype:'666666666666666666666666666',
    //                 userdetentiontime:'7777777777',
    //                 userreason:'88888888888',
    //                 userhealth:'9999999999',
    //                 userlatname:'asfdasfasdfasdfas',
    //                 usercmnname:'00000000000000',
    //                 useridno:'66666678686',
    //                 // userlists:'www.baidu1.com,www.baidu2.com,www.baidu3.com,www.baidu4.com,www.baidu5.com,www.baidu6.com,www.baidu7.com',
    //                 // uservideo:'www.goog1.com,www.goog2.com,www.goog3.com,www.goog4.com,www.goog5.com,www.goog6.com,www.goog7.com',
    //                 userlists:'',
    //                 uservideo:'',
    //                 userlang:'333'
    //         };
    //     },
    //     computed: {
    //         listUserImages: function () {
    //             var list = this.userlists.split(',');
    //             var arrTemp = [];
    //             var index = 0;
    //             var sectionCount = 3;
    //             for (var i = 0; i < list.length; i++) {
    //                 index = parseInt(i / sectionCount);
    //                 if (arrTemp.length <= index) {
    //                     arrTemp.push([]);
    //                 }
    //                 arrTemp[index].push(list[i]);
    //             }
    //             // console.log(arrTemp);
    //             return arrTemp;
    //         },
    //         listUserVideos: function () {
    //             var list = this.uservideo.split(',');
    //             var arrTemp = [];
    //             var index = 0;
    //             var sectionCount = 3;
    //             for (var i = 0; i < list.length; i++) {
    //                 index = parseInt(i / sectionCount);
    //                 if (arrTemp.length <= index) {
    //                     arrTemp.push([]);
    //                 }
    //                 arrTemp[index].push(list[i]);
    //             }
    //             // console.log(arrTemp);
    //             return arrTemp;
    //         }
    //     },
    //
    // });
    var app=new Vue({
        el: '#app',
        data () {
            // return responsedata;
            return {
                xuhao:1,
                language:'eng',
                result:{
                    userxuhao:'',
                    userphoto:'',
                    userage:'',
                    usergender:'',
                    userethnic:'',
                    userjob:'',
                    userorigin:'',
                    userlocation:'',
                    userdetentiontype:'',
                    userdetentiontime:'',
                    userreason:'',
                    userhealth:'',
                    userlatname:'',
                    usercmnname:'',
                    useridno:'',
                    // userlists:'www.baidu1.com,www.baidu2.com,www.baidu3.com,www.baidu4.com,www.baidu5.com,www.baidu6.com,www.baidu7.com',
                    // uservideo:'www.goog1.com,www.goog2.com,www.goog3.com,www.goog4.com,www.goog5.com,www.goog6.com,www.goog7.com',
                    userlists:'',
                    uservideo:'',
                    userlang:'',
                    comments1:'',
                    comments2:'',
                    comments3:'',
                    comments4:'',
                    comments5:'',
                    comments6:'',
                    comments7:'',
                    comments8:''
                }
            };
        },
        methods: {
            nav: function () {
                console.log(this.xuhao+'      '+this.language);
                axios.get('/search?language='+this.language+'&xuhao='+this.xuhao)
                    // .then(response => (result = response))
                    .then(function (response) { console.log('---2222--'+response.data.userage); console.log( JSON.stringify(response.data) );  app.result = response.data; })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                    // alert(1111);
                })
                //     .then( item => (
                //     // this.info = "CS反恐精英",
                //     result.age=444,
                //     result.gender='男'
                // ));
            }
        },
        watch : {
            language:function(val) {
                this.nav();
            },
            xuhao : function (val) {
                console.log('val::'+val);
                if(val<=0){
                    this.xuhao=1;
                }
                this.nav();
            }
        },
        computed: {
            listUserImages: function () {
                var usl = this.result.userlists;
                var arrTemp = [];
                if( usl ==null || usl==undefined ){
                    return arrTemp;
                }

                var list = usl.split(',');
                // var arrTemp = [];
                var index = 0;
                var sectionCount = 3;
                for (var i = 0; i < list.length; i++) {
                    index = parseInt(i / sectionCount);
                    if (arrTemp.length <= index) {
                        arrTemp.push([]);
                    }
                    if( list[i].indexOf('php')!=undefined && list[i].indexOf('php')!=-1 ){
                        continue;
                    }
                    arrTemp[index].push(list[i]);
                }
                // console.log(arrTemp);
                return arrTemp;
            },
            listUserVideos: function () {
                var uv = this.result.uservideo;
                var arrTemp = [];
                if( uv ==null || uv==undefined ){
                    return arrTemp;
                }
                var list = uv.split(',');

                var index = 0;
                var sectionCount = 3;
                for (var i = 0; i < list.length; i++) {
                    index = parseInt(i / sectionCount);
                    if (arrTemp.length <= index) {
                        arrTemp.push([]);
                    }
                    arrTemp[index].push(list[i]);
                }
                // console.log(arrTemp);
                return arrTemp;
            }
        },



    })
    app.nav();

</script>
</body>
</html>






<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
    <!--<meta charset="utf-8">-->
    <!--<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>-->
    <!--<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--<div id = "computed_props">-->
    <!--千米 : <input type = "text" v-model = "kilometers">-->
    <!--米 : <input type = "text" v-model = "meters">-->
<!--</div>-->
<!--<p id="info"></p>-->
<!--<script type = "text/javascript">-->
    <!--var vm = new Vue({-->
        <!--el: '#computed_props',-->
        <!--data: {-->
            <!--kilometers : 0,-->
            <!--meters:0-->
        <!--},-->
        <!--methods: {-->
            <!--xxx:function(){alert(1111);}-->
        <!--},-->
        <!--computed :{-->
        <!--},-->
        <!--watch : {-->
            <!--kilometers:function(val) {-->
                <!--alert(val);-->
                <!--this.xxx();-->
            <!--},-->
            <!--meters : function (val) {-->
                <!--this.kilometers = val/ 1000;-->
                <!--this.meters = val;-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--// $watch 是一个实例方法-->
    <!--vm.$watch('kilometers', function (newValue, oldValue) {-->
        <!--// 这个回调将在 vm.kilometers 改变后调用-->
        <!--document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;-->
    <!--})-->
    <!--vm.xxx();-->
<!--</script>-->
<!--</body>-->
<!--</html>-->